<template>

    <el-card shadow="never" class="cus-card" style="margin-bottom: 15px" :body-style="{ 'padding-bottom': '0' }">
        <el-form :model="searchData" ref="searchFormRef" label-width="110px">
            <el-row type="flex"  class="flex-wrap-wrap">
                <el-col :span="6">
                    <el-form-item label="字典标识：">
                        <el-input clearable placeholder="请输入" v-model="searchData.code"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="名称：">
                        <el-input clearable placeholder="请输入" v-model="searchData.name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="字典类型：">
                        <DictSelector
                                class="wfull"
                                code="dict_category"
                                clearable
                                placeholder="全部"
                                v-model="searchData.category">
                        </DictSelector>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item>
                        <el-button icon="Delete" @click="searchData = {}">清空</el-button>
                        <el-button type="primary" icon="Search" @click="getPage">查询</el-button>
                        <!--<el-button type="primary" icon="ArrowUp" v-if="searchopen" @click="searchopen = !searchopen">收起</el-button>-->
                        <!--<el-button type="primary" icon="ArrowDown" v-if="!searchopen" @click="searchopen = !searchopen">展开</el-button>-->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

    </el-card>
    <el-card>
        <el-button class="mb-4px" icon="plus" type="success" @click="formPage.open('create')">新增</el-button>
        <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" id="databaseTable" :data="pageData.records"
                  border max-height="500">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60"/>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="字典标识"/>
            <el-table-column prop="category" label="字典分类" >
                <template #default="item">
                    {{ DictUtils.getDictLabel('dict_category', item.row.category) }}
                </template>

            </el-table-column>

            <el-table-column  label="操作" width="200">
                <template #default="item">
                    <el-button type="primary" link size="small"
                               @click=" service.deleteById(item.row.id)
                               .confirm('确认删除数据字典?','warning')
                               .success(result => {MsgUtils.successMsg('删除成功');getPage();})
                               .request()">删除
                    </el-button>
                    <el-button type="primary" link size="small"  @click="formPage.open('edit',item.row)">编辑</el-button>
                    <el-button type="primary" link size="small"  @click="itemPage.open(item.row)">字典项</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                background
                small
                v-model:currentPage="pageData.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageData.size"
                layout="total, sizes, prev, pager, next"
                :total="pageData.total"
                @size-change="(size)=>{pageData.size = size;getPage()}"
                @current-change="(current)=>{pageData.current = current;getPage()}"
        >
        </el-pagination>
    </el-card>
    <DictForm
            :saveSuccess="()=>{formPage.close();MsgUtils.successMsg('保存成功');getPage()}"
            :saveError="()=>{MsgUtils.errorMsg('保存失败')}"
            ref="formPage"></DictForm>
    <dict-item-list ref="itemPage">

    </dict-item-list>
</template>
<script lang="ts" setup>
    import Utils from "@/common/utils/Utils";
    import {computed, onMounted, ref, watch} from 'vue'
    import service, {Dict} from "@/api/sys/SysDictApi";
    import {Page} from "@/api/BaseApi";
    import MsgUtils from "@/common/utils/MsgUtils";
    import DictForm from './DictForm.vue'
    import DictItemList from "./DictItemList.vue";
    import DictItemService from "@/api/sys/SysDictItemApi";
    import {useStore} from "vuex";
    import DictSelector from "@/components/DictSelector.vue";
    import DictUtils from "../../../common/DictUtils";

    //表单组件
    const formPage = ref(null);
    //Item列表组件
    const itemPage = ref(null);
    //查询条件
    let searchData = ref<Dict>({})
    //列表分页数据
    let pageData = ref<Page<Dict>>({size: 20, current: 1,total:0});
    //搜索是否展开
    let searchopen = ref<boolean>(false);

    //列表序号 = index + 1 + 页码*容量
    const indexMethod = (index: number) => pageData.value.size * (pageData.value.current - 1) + index + 1;
    //获取列表信息
    const getPage = () => {
        service
            .getPage(pageData.value, searchData.value)
            .success(result => pageData.value = result.data)
            .request()
    }
    onMounted(() => {
        getPage();

    })

</script>
<style lang="scss" scoped>
</style>

